<template>
  <ag-grid-vue
    :animate-rows="animateRows"
    :class="theme"
    :default-col-def="defaultColDef"
    :enable-cell-text-selection="enableCellTextSelection"
    :locale-text="i18n"
    :row-height="rowHeight"
    :suppress-row-hover-highlight="suppressRowHoverHighlight"
    :suppress-scroll-on-new-data="suppressScrollOnNewData"
  />
</template>

<script lang="ts">
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
import 'ag-grid-community/styles/ag-theme-balham.css';
import 'ag-grid-community/styles/ag-theme-material.css';
import { AgGridVue } from 'ag-grid-vue3';
import { defineComponent, PropType, toRefs } from 'vue';
import { i18n } from './i18n';
import { useTheme } from './use-theme';
import './style.css';

export default defineComponent({
  name: 'ag-grid',

  components: {
    AgGridVue,
  },

  props: {
    animateRows: {
      type: Boolean,
      default: true,
    },
    defaultColDef: {
      type: Object as PropType<{ sortable?: boolean; filter?: boolean; resizable?: boolean }>,
      default: () => ({ sortable: true, filter: true, resizable: true }),
    },
    enableCellTextSelection: {
      type: Boolean,
      default: true,
    },
    rowHeight: {
      type: Number,
      default: 40,
    },
    suppressRowHoverHighlight: {
      type: Boolean,
      default: true,
    },
    suppressScrollOnNewData: {
      type: Boolean,
      default: true,
    },
    /**
     * 如果提供了 true/false, 则不会根据系统设置变更深色模式
     */
    dark: {
      type: Boolean,
      default: undefined,
    },
    dense: {
      type: Boolean,
    },
  },

  setup(props) {
    const { dark, dense } = toRefs(props);
    const theme = useTheme(dark, dense);

    return { i18n, theme };
  },
});
</script>
